<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用单一颜色清除 WebGl 区域</title>
    <style>
        body {
            text-align : center;
        }
        canvas {
            display : block;
            width : 280px;
            height : 210px;
            margin : auto;
            padding : 0;
            border : none;
            background-color : black;
        }
    </style>
</head>
<body>
    <p>A very simple WebGL program that shows some color.</p>
    <canvas>Your browser does not seem to support HTML5 canvas.</canvas>
    <script>
        window.addEventListener("load", function setupWebGL (evt) {
            "use strict"
            window.removeEventListener(evt.type, setupWebGL, false);
            var paragraph = document.querySelector("p"),
                canvas = document.querySelector("canvas");

            var gl = canvas.getContext("webgl")|| canvas.getContext("experimental-webgl");

            if (!gl) {
                paragraph.innerHTML = "Failed to get WebGL context. "+ "Your browser or device may not support WebGL.";
                return;
            }
            paragraph.innerHTML ="Congratulations! Your browser supports WebGL. ";
            gl.viewport(0, 0,
                gl.drawingBufferWidth, gl.drawingBufferHeight);
            gl.clearColor(0.0, 0.5, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
        }, false);

    </script>
</body>
</html>